<template>
    <div class="shop">
        <div class="shop-header">
            <div class="search">
                <img src="../../assets/images/search.svg" alt="">
            </div>
            <span>商城</span>
            <div class="cart">
                <img src="../../assets/images/cart.svg" alt="">
            </div>
        </div>
        <div class="shop-list">
            <van-grid :column-num="5" :border="false">
                <van-grid-item v-for="item in icons" :icon=item.iconImg :text=item.icon />
            </van-grid>
        </div>
        <div class="shop-details">
            <div class="all-commodity">
                <span>全部商品</span>
            </div>
            <div class="shop-detail">
                    <div class="commodity-img" v-for="item in ListData">
                        <img :src="item.commodity_image" alt="" 
                        @click="toDeatil(item.commodity_id)">
                        <div class="if-exemption ">
                            <span>包邮</span>
                        </div>
                        <div class="commodity-introduce">
                            <div class="commodity-title">
                                <span>
                                    {{ item.commodity_title }}
                                </span>
                            </div>
                            <div class="commodity-price">
                                <span class="price-true">¥{{ item.price }}</span>
                                <span class="price-false">¥{{ item.lastprice }}</span>
                            </div>
                        </div>
                    </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, reactive } from 'vue';
import { useRouter } from 'vue-router';
import http from '../../tools/axios';
import icon1 from '../../assets/images/shop/1.svg'
import icon2 from '../../assets/images/shop/2.svg'
import icon3 from '../../assets/images/shop/3.svg'
import icon4 from '../../assets/images/shop/4.svg'
import icon5 from '../../assets/images/shop/5.svg'
import icon6 from '../../assets/images/shop/6.svg'
import icon7 from '../../assets/images/shop/7.svg'
import icon8 from '../../assets/images/shop/8.svg'
import icon9 from '../../assets/images/shop/9.svg'
import icon10 from '../../assets/images/shop/10.svg'
const icons = reactive([
    {
        "icon": "果蔬",
        "iconImg": icon1
    },
    {
        "icon": "海鲜",
        "iconImg": icon2
    },
    {
        "icon": "肉蛋",
        "iconImg": icon3
    },
    {
        "icon": "粮油",
        "iconImg": icon4
    },
    {
        "icon": "烘焙",
        "iconImg": icon5
    },
    {
        "icon": "零食",
        "iconImg": icon6
    },
    {
        "icon": "冲调饮品",
        "iconImg": icon7
    },
    {
        "icon": "个护",
        "iconImg": icon8
    },
    {
        "icon": "餐厨",
        "iconImg": icon9
    },
    {
        "icon": "家居",
        "iconImg": icon10
    }
]);
const ListData = ref([]);
const getCommodity = () => {
    http.get('/commodity/get').then((res) => {
        console.log(res);4
        if (res.data.code === 200) {
            ListData.value = res.data.data;
            console.log(ListData.value);
        } else {
            console.log('error');
        }

    })
}
getCommodity();
const router = useRouter()
const toDeatil = (commodity_id) =>{
    console.log(commodity_id);
    router.push({path: `/shopDetail/${commodity_id}`})
}
</script>

<style lang="scss">
.shop {
    margin-top: 20px;

    .shop-header {
        display: flex;
        align-items: center;
        justify-content: space-between;

        .search {
            width: 20px;
            height: 20px;
            margin-left: 20px;

            img {
                width: 100%;
                height: 100%;
            }
        }

        span {
            font-size: 18px;
            font-weight: 500;
        }

        .cart {
            width: 20px;
            height: 20px;
            margin-right: 20px;

            img {
                width: 100%;
                height: 100%;
            }
        }
    }

    .shop-list {
        margin: 12px;
    }

    .shop-details {
        .all-commodity {
            margin-left: 20px;
            font-size: 18px;
            font-weight: 400;
        }

        .shop-detail {
            margin: 25px;
            display: grid;
            grid-template-columns: 1fr 1fr;
            grid-column-gap: 20px;
            grid-row-gap: 70px;

            .commodity-img {
                position: relative;
                width: 150px;
                height: 170px;
                margin-top: 20px;

                img {
                    border-radius: 10px;
                    width: 100%;
                    height: 100%;
                }

                .if-exemption {
                    position: absolute;
                    top: 10px;
                    left: 5px;
                    background: #f4cd63;
                    width: 35px;
                    height: 18px;
                    border-radius: 6px;
                    display: flex;
                    align-items: center;
                    justify-content: center;

                    span {
                        font-size: 12px;
                    }
                }

                .commodity-introduce {
                    .commodity-title {
                        span {
                            color: black;
                            font-size: 12px;
                            font-weight: 350;
                            overflow: hidden;
                            text-overflow: ellipsis;
                        }
                    }

                    .commodity-price {
                        .price-true {
                            font-size: 15px;
                            color: red;
                        }

                        .price-false {
                            font-size: 12px;
                            font-weight: 300;
                            text-decoration: line-through;
                            color: black
                        }
                    }
                }
            }
        }
    }
}
</style>